<!-- 充提数据 -->
<template>

  <div class="pag" >
    <div class="banner">
      <h3>{{ new Date() | toDate }}数据信息</h3>
    </div>
    <div class="user-data1">
      <div class="t1">
        <div>
          <p>昨日充值数量</p>
          <div style="color: #00A989" :xdw="rechargeCvnt ? '+' : ''">{{ rechargeCvnt.toFixed(0)  | numAddSep}}</div>
        </div>
        <p></p>
        <div>
          <p>昨日提现数量</p>
          <div style="color:#DC0630;" :xdw="withdrawCvnt ? '-' : ''">{{ withdrawCvnt.toFixed(0)  | numAddSep}}</div>
        </div>
      </div>
      <div class="t2">
        <label>全网总代币数量</label>
        <label>{{ cvnt.toFixed(0)  | numAddSep}}</label>
      </div>
    </div>
    <div class="un-t">
      <label>未提现总代币数量</label>
      <label>{{ unWithdrawCvnt.toFixed(0)   | numAddSep}}</label>
    </div>
    <div class="un-u">
      <label>不可用总代币数量</label>
      <label>{{ unavailableCvnt.toFixed(0)   | numAddSep}}</label>
    </div>
    <div class="p-num">
      <div class="p-num_item">
        <div>
          今日大额转账人数
          <p>单笔超过10万用户</p>
        </div>
        <p>{{ transferUserCount   | numAddSep}}</p>
      </div>
      <div class="p-num_item">
        <div>
          今日大额提现人数
          <p>单笔超过10万用户</p>
        </div>
        <p>{{ withdrawUserCount   | numAddSep}}</p>
      </div>
    </div>
  </div>

</template>

<script>
    import {getViewUser, getViewCvnt, getViewPledge } from 'api/index'
    import {numAddSep} from 'common/js/utl'
    export default {
        data() {
            return {
                "rechargeCvnt": 0,
                "withdrawCvnt": 0,
                "cvnt": 0,
                "unWithdrawCvnt": 0,
                "unavailableCvnt": 0,
                "transferUserCount": 0,
                "withdrawUserCount": 0
            }
        },
        beforeRouteEnter (to, from, next) {
            next((vm) => {
                vm.getData()
            })
        },
        methods: {
            async getData() {
                let {data} = await getViewCvnt({
                    t: Date.now()
                })
                Object.assign(this, data)
            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  .pag {

  }

  .banner {
    //width:750px;
    height:310px;
    background:linear-gradient(210deg,rgba(10,29,87,1),rgba(24,63,143,1));
    h3 {
      padding: 50px 0 0 29px;
      font-size:42px;
      font-weight:600;
      color:rgba(255,255,255,1);
    }
  }

  .user-data1 {
    width:690px;
    height:340px;
    background:rgba(255,255,255,1);
    box-shadow:0px 1px 2px 0px rgba(10,29,87,0.2);
    border-radius:14px;
    margin: -170px auto 24px auto;
  }

  .t1 {
    padding: 40px 0;
    display: flex;
    > p {
      width:2px;
      height:148px;
      background:rgba(245,245,245,1);
    }
    > div {
      flex: 1;
      text-align: center;
      p {
        font-size:30px;
        color:rgba(113,118,140,1);
        margin-bottom: 58px;
      }
      div {
        font-size:46px;
        font-weight:600;
        color:rgba(32,44,91,1);
      }

    }
  }

  .t2 {
    border-top: 2px solid #F5F5F5;
    margin: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    height: 110px;
    label{
      &:first-of-type {
        font-size:30px;
        color:rgba(113,118,140,1);
      }
      &:last-of-type {
        font-size:48px;
        font-weight:600;
        color:rgba(32,44,91,1);
      }
    }
  }


  .un-t {
    margin: 0 30px 25px 30px;
    height:140px;
    background:rgba(0,131,255,1);
    border-radius:10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 23px;
    label {
      &:first-of-type {
        font-size:30px;
        color:rgba(255,255,255,1);
      }
      &:last-of-type {
        font-size:42px;
        font-weight:600;
        color:rgba(255,255,255,1);
      }
    }
  }

  .un-u {
    margin: 0 30px 25px 30px;
    height:140px;
    background:#7848FF;
    border-radius:10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 23px;
    label {
      &:first-of-type {
        font-size:30px;
        color:rgba(255,255,255,1);
      }
      &:last-of-type {
        font-size:42px;
        font-weight:600;
        color:rgba(255,255,255,1);
      }
    }
  }

  .p-num {
    margin: 0 30px;
    display: flex;
    justify-content: space-between;
    &_item{
      padding-top: 24px;
      width:330px;
      height:164px;
      border-radius:10px;
      text-align: center;
      > div {
        font-size:30px;
        color:rgba(255,255,255,1);
        height: 82px;
        p {
          margin-top: 8px;
          font-size:22px;
          color:rgba(255,193,200,1);
        }
      }
      > p {
        font-size:48px;
        font-weight:600;
        color:rgba(255,255,255,1);
      }
      &:first-of-type{
        background:rgba(255,62,90,1);
        box-shadow:0px 1px 2px 0px rgba(10,29,87,0.2);
      }
      &:last-of-type {
        background:rgba(255,75,57,1);
      }
    }
  }



</style>
















